<template>
  <!-- 水源 -->
  <div style="float: left;margin-left: 1vh;text-align: left;width: 99%;">
    <el-form ref="form" label-width="300px" label-suffix=":" align="left" style="margin-top: 40px;color: #FFFFFF;"
      :model="form" :rules="rules">
      <el-form-item label="最大供应量" prop="output">
        <el-input v-model="form.output" style="width: 300px;">
          <i slot="suffix" style="font-style:normal;margin-right: 10px;">t/h</i>
        </el-input>
      </el-form-item>
      <hr />
      <el-form-item label="管道长度" prop="pipeLength">
        <el-input v-model="form.pipeLength" style="width: 300px;">
          <i slot="suffix" style="font-style:normal;margin-right: 10px;">Km</i>
        </el-input>
      </el-form-item>
      <hr />
      <el-form-item label="扬程" prop="lift">
        <el-input v-model="form.lift" style="width: 300px;">
          <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
        </el-input>
      </el-form-item>
      <hr />
    </el-form>
    <el-button style="float: right;margin-right: 4vh;margin-top: 4vh;" type="primary" @click="save">保存</el-button>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        project_id: this.$root.project_id,
        form: {
          output: '',
          pipeLength: '',
          lift: ''
        },
        rules: {
          output: [{
            required: true,
            message: '请输入最大供应量',
            trigger: 'blur'
          }],
          pipeLength: [{
            required: true,
            message: '请输入管道长度',
            trigger: 'blur'
          }],
          lift: [{
            required: true,
            message: '请输入扬程',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http.post('/iepsapi/resource/saveWater', {
              project_id: this.project_id,
              pipe_length: this.form.pipeLength,
              lift: this.form.lift,
              output: this.form.output,
            }).then((res) => {
              if (res.data.flag) {
                this.$message({
                  type: 'success',
                  message: res.data.message
                });
              } else {
                this.$message.error(res.data.message);
              }
              this.$refs['form'].resetFields();
            }).catch((error) => {
              console.log(error);
            });
          }
        });
      }
    }
  }
</script>

<style scoped>
  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  hr{
    margin-top: 40px;
    margin-bottom: 40px;
  }
</style>
